<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Drag n'Drop</title>
		<style type="text/css">
			body{
				font-family:Arial;
				font-size:0.8em;
			}
			
			div{
				position:absolute;
			}
			
			ul{
				list-style:none;
				padding:0;
				margin:50px;
			}
			li{
				padding:10px;
				width:100px;
				font-size:4em;
			}
			li:hover
				{
				outline:1px solid red;
				}
			li:active
				{
				outline:3px solid yellow;
				}

						
			div.drag-target
				{
				width:100px;
				height:100px;
				background:gray;
				/*position:absolute;*/
				}
		</style>
		<script type="text/javascript" src="../../current/1.6.18.25/core.js"></script>
		<script type="text/javascript">
	
			
			function $(o){
				return typeof(o)=="string" ? document.getElementById(o) : o;
			}
					


		
		
		
		
		
		
		
			function DD(base,targets,collisionType){
				this.base=base;
				if(DD.collision.type.hasOwnProperty(collisionType)){
					this.collisionType=collisionType;
				}
				this.hitTest = targets instanceof Array ? DD.collision.manyTargets : DD.collision.oneTarget;
				this.hitTest.type = DD.collision.type[this.collisionType];
				this.targets = targets;
				if(base instanceof Array){
					for(var i=0,b;b=base[i];i++){
						b.DD = this;
						compono.Event.add("mousedown",this.start,b);
					}
				}else{
					base.DD = this;
					compono.Event.add("mousedown",this.start,base);
				}
			}	
			DD.prototype = {
				base:false,
				gap:{x:0,y:0},
				state:{
					init:{p:'',x:0,y:0,z:0},
					next:{p:'absolute',z:1000}
				},
				targets:[],
				colliders:[],
				collisionType:"edgeBox",
				hitTest:function(){},
				start:function(e){
					DD.current = this;
					var d = this.DD;
					
					d.move.base = this;
					d.stop.base = this;
					
					d.state.init.p = this.style.position;
					d.state.init.z = this.style.zIndex;
					d.state.init.x = this.style.left;
					d.state.init.y = this.style.top;
					
					this.style.position = d.state.next.p;
					this.style.zIndex = d.state.next.z;

					d.gap.x = (e.clientX - this.offsetLeft);
					d.gap.y = (e.clientY - this.offsetTop);

					if(this.DD.onDrag)this.DD.onDrag(this);
					
					compono.appendClassName("dragging",this);
					
					compono.Event.add("mousemove",this.DD.move,document);
					compono.Event.add("mouseup",this.DD.stop,document);
					
					this.unselectable="on";
					this.style.MozUserSelect="none";
					this.style.KhtmlUserSelect="none";
				},
				move:function(e){
					var o=arguments.callee.base;
					o.style.top = (e.clientY - o.DD.gap.y) + "px";
					o.style.left = (e.clientX - o.DD.gap.x) + "px";
					o.DD.hitTest(o);
				},
				stop:function(e){
					var o=arguments.callee.base;
					var d = o.DD;
					compono.Event.remove("mousemove",d.move,document);
					compono.Event.remove("mouseup",d.stop,document);
					if(d.onDrop){
						if(	d.onDrop(o,!!(d.colliders.length),d.colliders) != false ){
							o.style.position = d.state.init.p;
							o.style.zIndex = d.state.init.z;
							o.style.left = d.state.init.x;
							o.style.top = d.state.init.y;
						}
					}
					DD.current = false;
					compono.removeClassName("dragging",o);
				},
				onDrag:function(){},
				onCollision:function(){},
				onNotCollision:function(){},
				onDrop:function(){},
				toString:function(){return "DD"}
			}
			
			DD.current=false;
			
			DD.collision = {
				oneTarget:function(a){
					this.colliders=[];
					if(arguments.callee.type(a,this.targets) && a !== this.targets){
						this.colliders[this.colliders.length]=this.targets;
						if(this.onCollision)this.onCollision(a,this.targets);
					}
				},
				manyTargets:function(a){
					this.colliders=[];
					for(var i=0,b;b=this.targets[i];i++){
						if(arguments.callee.type(a,b) && a !== b){
							this.colliders[this.colliders.length]=b;
							if(this.onCollision)this.onCollision(a,b);
						}else{
							if(this.onNotCollision)this.onNotCollision(a,b);
						}
					}
				},
				type:{
					edgeBox:function(A,B){
						return !(	A.offsetLeft + A.offsetWidth < B.offsetLeft || 
									A.offsetLeft > B.offsetLeft + B.offsetWidth || 
									A.offsetTop + A.offsetHeight < B.offsetTop || 
									A.offsetTop > B.offsetTop + B.offsetHeight		);
					},
					boundingBox:function(A,B){
						return (	A.offsetLeft > B.offsetLeft && 
									A.offsetLeft + A.offsetWidth < B.offsetLeft + B.offsetWidth && 
									A.offsetTop + A.offsetHeight < B.offsetTop + B.offsetHeight && 
									A.offsetTop > B.offsetTop		);
					}
				}
			}
			
		
			window.onload=function(){
				
				var d = new DD(	[$('b0'),$('b1'),$('b2'),$('b3'),$('d1')],
								[$('d1'),$('d2'),$('d3'),$('d4'),$('d5'),$('d6')])
				
				d.onCollision=function(o,t){
					t.style.border="5px solid red";
					t.style.margin="-5px";
				}
				d.onNotCollision=function(o,t){
					t.style.border="";
					t.style.margin="";
				}
				d.onDrop=function(o,hasCollision,targets){
					if(hasCollision){
						o.parentNode.removeChild(o);
						for(var i=0,b;b=targets[i];i++){
							b.style.backgroundColor=o.style.backgroundColor;
							b.style.border="";
							b.style.margin="";
						}
					}
					//return false;
				}

			}
			
			
		</script>
	</head>
	<body>
		<ul>
			<li id="b0" style="background-color:red;">1</li>
			<li id="b1" style="background-color:yellow;">2</li>
			<li id="b2" style="background-color:green;">3</li>
			<li id="b3" style="background-color:blue;">4</li>
		</ul>
		
		<div id="d1" class="drag-target" style="background-color:purple;top:200px;left:600px;">1</div>
		<div id="d2" class="drag-target" style="top:200px;left:710px;">2</div>
		<div id="d3" class="drag-target" style="top:310px;left:600px;">3</div>
		<div id="d4" class="drag-target" style="top:310px;left:710px;">4</div>
		
		<div id="d5" class="drag-target" style="top:10px;left:600px;">5</div>
		<div id="d6" class="drag-target" style="top:10px;left:710px;">6</div>
	</body>
</html>
